<template>
	<view class="box">
	
		<!-- 搜索框 -->
	<!-- 	<view class="search_box" @click="xz_goto('search')">
			<u-search :show-action="true" :disabled='true' bg-color='#F1F6FE' actionText="搜索" :animation="false">
			</u-search>
		</view> -->
		
		<view class="navbar">
			<u-navbar :fixed="true" title=" " leftIconColor='#fff' @leftClick="xz_back" bgColor="#444758"
				title-color="white">
				<view slot="center">
					<view class="search_box_box">
						<view style="width: 64rpx;"></view>
						<!-- 搜索框 -->
						<view class="search_box" style="width: 690rpx;" @click="xz_goto('integral_search')">
							<u-search shape="round" bgColor='#fff' placeholder='请输入搜索商品' bg-color='#F1F6FE' :disabled='true'
								:showAction="false" @click="go_search()"></u-search>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		
		
		<!-- 内容区 -->
		<view class="sidebar_box">
			<!-- 左侧分类 -->
			<view class="side_left">
		<!-- 		<view style="height:15rpx"> </view> -->
				<scroll-view class="side_list" scroll-y="true">
					<view v-for="(item,index) in tabs" :key="index" class="side_item"
						:class="{'side_active':tabs_index==index}" :data-current="index" @tap.stop="opt(item,index)">
						<view class="side_title">{{item.cat_name}}</view>
					<!-- 	<u-icon v-if="tabs_index==index" name="arrow-right"></u-icon> -->
					</view>
				</scroll-view>
			</view>
			<!-- 右侧列表 -->
			<view class="side_right">
				<scroll-view class="side_list" scroll-y>
					<u-collapse accordion :border='false'>
						
						<mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback"
							@up="upCallback" :down="downOption" :up="upOption">
							
							<!-- 产品分类列表 -->
							<view class="list">
								<view class="item" v-for="(item, index) in list" :key="index" @click="go_to(item)">
									<image :src="item.goods_thumb" class="image"></image>
									<view class="content">
										<view class="title">{{item.goods_name}}</view>
										<!-- <view class="price">¥{{item.goods_price}}</view> -->
									</view>
								</view>
							</view>
						
						</mescroll-body>
						
						
					
					</u-collapse>
					
				<!-- 	<u-empty
							v-if="goods&&goods.length==0"
					        mode="list"
							text='这里空空如也~'
					        :icon="empty_icon"
					>
					</u-empty> -->
					
				</scroll-view>
			</view>

		</view>
	</view>
</template>
<script>
	// pages.json 中 easycom 为自动读取uni_modules内插件时，可省略
	// import CssFloatBall from  '@/uni_modules/css-float-ball/components/css-float-ball/css-float-ball'
	// import Ball from  '@/components/ball/ball'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin, uni.$u.mpMixin, uni.$u.mixin],
		//所有数据
		data() {
			
			return {
				httpPath:this.httpPath,
				list: '',
				tabs_index: 0, //当前分类下标
				tabs_id: '', //当前分类id
				tabs: [], //获取推荐分类
				goods:null,//获取商品分类
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
			};
		},
		//页面加载完毕
		onLoad(e) {
			//分步骤执行接口
			this.step();

		},
		//每次进入页面
		onShow() {

		},
		//所有方法
		methods: {
			async step() {
				//步骤1 获取分类列表
				await this.get_tabs();
				//步骤2 获取商品分类
				// await this.get_goods();
			},
			
			// get_classify(){
				
			// 	uni.$u.http.get('/app/goods/getCategoryList', {
			// 		params: {
			// 			is_recommend:0
			// 		},
			// 		custom: {
			// 			auth: true,
			// 			toast: false,
			// 			catch: false,
			// 		},
			// 	}).then(res => {
			// 		console.log('获取分类',res);
			// 		this.tabs = res;
			// 	}).catch(err => {
					
			// 	})
			// },
			//获取推荐分类
			get_tabs() {
				let that = this;
				console.log('第一步获取分类');
				return new Promise(function(resolve, reject){
					uni.$u.http.get('/app/goods/getCategoryList', {
						params: {
							is_recommend:0
						},
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					}).then(res => {
						console.log('获取分类1212312',res);
						that.tabs = res;
						that.tabs_id = res[0].id;
						// 获取到参数后执行下拉刷新
						that.$nextTick(() => {
							that.mescroll.resetUpScroll();
						})
						resolve(res);
					}).catch(err => {})
					
				})
				
			},
			
			go_to(item) {
				uni.navigateTo({
					url: '/pages/integral/good_item?id=' + item.id
				});
			},
			
			//获取商品分类
			get_goods() {
					console.log('第二步获取商品分类');
					// uni.$u.http
					// 	.get("/app/homes/getCategory", {
					// 		params: {parent_id: this.tabs_id}
					// 	})
					// 	.then((res) => {
					// 		console.log("获取商品分类", res);
					// 		this.goods = res;
					// 	})
					// 	.catch((err) => {});
						
						
							
							
			},
			
			//
			//下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
			
			uni.$u.http
				.get('/app/integral/list', {
					params: {
						is_recommend:0,
						cat_id:this.tabs_id
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}, )
				.then(res => {
					console.log('返回的数据', res.list);
					this.mescroll.endSuccess(res.list.length);
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.list); //追加新数据
						
				})
				.catch(res => {
					this.mescroll.endErr();
				});
			},

			// 点击左边的栏目切换
			opt(item,index) {
				if (this.tabs_index == index) return;
				this.tabs_index = index;
				this.tabs_id = item.id;
				//切换分类重新加载商品分类列表
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				})
			},

			go(name) {
				this.xz_go(name)
			}
		}
	};
</script>
<style lang="scss" scoped>
	
	// 展示品列表
	.list {
	
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// padding: 0 30rpx;
	
		//单个产品
		.item {
			width: 150rpx;
			// height: 150rpx;
			// height: 308rpx;
			// height: 400rpx;
			// margin-bottom: 20rpx;
			border-radius: 12rpx;
			margin-right: 8rpx;
			margin-left: 8rpx;
	
			//产品图片
			.image {
			
				display: flex;
				align-items: center;
				text-align: center;
				width: 150rpx;
				height: 150rpx;
				border-radius: 4px;
					overflow: hidden;
					background: #444758;
					padding: 10rpx;
					box-sizing: border-box;
				image {
					width: 100%;
					height: 100%;
				}
			}
	
	.content{
		height: 90rpx;
		display: flex;
		align-items: center;
	}
	
			//产品标题
			.title {
			
				
				width: 100%;
				font-size: 24rpx;
				// line-height: 2;
				font-weight: bold;
				color:#FAFAFA;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				text-align: center;
				// margin-bottom: 20rpx;
				/* autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */
				-webkit-line-clamp: 1;
			}
	
		
	
			//产品价格
			.price {
				line-height: 2;
				font-size: 18rpx;
					color: #fff;
				display: flex;
			}
			
		}
	}
	
	
	
	

	
	/deep/.u-collapse-item__content__text {
		padding: 0 !important;
	}




	//大盒子
	.box {
		overflow: hidden;
	}
	
	.navbar{
		background: #444758;
			height: 100rpx;
			width: 750rpx;
	}
.search_box_box{
	display: flex;
}
	//输入框
	.search_box {
		padding: 18rpx 34rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		box-sizing: border-box;
	}


	.sidebar_box {
		display: flex;
		justify-content: space-between;

		.side_left {
			width: 200rpx;
			// padding: 15rpx 0 0 0 ;

			.side_list {
				width: 200rpx;
				height: calc(100vh - 101rpx);
				background: #444758;
				// box-shadow: 0 2rpx 12rpx rgba(116, 116, 116, 0.16);
				border-radius: 0 20rpx 0 0;

			}

			.side_item {
				height: 100rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				
				color:#fff;
				font-weight: 400;
				display: flex;
				justify-content:center;
			}

			

			.side_active {
				border-radius: 0 20rpx 20rpx 0;
				border: 4rpx solid #444758;
				background: #252837;
				font-size: 26rpx;
				color: #FCD34D;
			}
			

		}


		.side_right {
			width: 100%;

			.side_list {
				box-sizing: border-box;
				padding: 30rpx 25rpx;
				height: calc(100vh - 108rpx);

				/deep/ .u-collapse-item {
				
				}
				
			}
		}
	}
	
	
	
</style>




<style lang="scss" scoped>
	
	
	
	
	
	
	.u-wrap {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
		.head {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 20rpx;
			background-color: white;
		}
	}

	.u-search-box {
		padding: 0rpx 30rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		width: 100%;
	}

	.search-warp {
		display: flex;
		overflow: hidden;
		background-color: #FFFFFF;
		position: absolute;
		z-index: 10;
		top: 200rpx;
		left: 0;
		width: 100%;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		// overflow: hidden;
		// background-color: #F8F8F8;
		    justify-content: space-between;
	}

	.u-tab-view {
		
		width: 230rpx;
		 height: 100%;
	}

	.u-tab-item {
		height: 100rpx;
		// background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding: 0 20rpx;
		color: #999999;
		font-weight: 400;
		
	}
	.u-tab-item::before {
		content: "";
		border-left: 4px solid #fff;
		height: 32rpx;
		margin-right: 30rpx;
	}

	.u-tab-item-active {
		position: relative;
		color: #333333;
		font-size: 28rpx;
		font-weight: 600;
		// background: #fff;
		color: #F5AB01;
		
	}

	.u-tab-item-active::before {
		content: "";
		border-left: 4px solid #F5AB01;
		height: 32rpx;
		margin-right: 30rpx;
	}

	.u-tab-view {
		height: calc(100vh - 350rpx);
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0 2rpx 12rpx rgba(116, 116, 116, 0.16);
		border-radius: 0 20rpx 20rpx 0;
	}

	.right-box {
		height: calc(100vh - 350rpx);
		width: 520rpx;
		
	}
	
	/deep/.mescroll-body {
		min-height: calc(100vh - 350rpx) !important;
	}

	.page-view {
		
	}

	.class-item {
	
		border-radius: 8rpx;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color:  #fff;
	}

	.item-container {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.item-active {
		color: #fff;
	}

	.thumb-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 100rpx;
		width: 100%;
		padding: 0 20rpx;
		align-items: center;
		font-size: 32rpx;
	}
	
	.navbar{
		background: #444758;
	}
	
</style>
